import React, { useEffect, useState } from 'react';
import { addTakeAwayBoardType, updateTakeAwayBoardType, getTakeAwayBoardTypeById } from '@/services/takeAwayBoardTypeService'
import {
  Form,
  message,
  Modal,
  Input,
  Button,
  InputNumber
}
  from 'antd';

interface Props {
  shopId: number,
  id?: number,
  modalVisible: boolean;
  onSubmit: () => void;
  onCancel: () => void;
}

const CreateModal: React.FC<Props> = (props) => {
  const { modalVisible, onSubmit, onCancel, id, shopId } = props;
  const [form] = Form.useForm();

  const saveRecord = async () => {
    form.validateFields().then(async (values) => {
      console.log(values)
      const { StatusCode } = id ? await updateTakeAwayBoardType({ ...form.getFieldsValue(), Id: id, ShopId: shopId }) : await addTakeAwayBoardType({ ...form.getFieldsValue(), ShopId: shopId, Status: 1 });
      if ((id && StatusCode == 0) || (!id && StatusCode == 201)) {
        message.success("保存成功！");
        onSubmit?.();
        form.resetFields();
      }
    }).catch(err => console.log(err));
  }

  const getBoardType = async () => {
    if (!id) {
      return;
    }

    const { Items } = await getTakeAwayBoardTypeById(id, {});
    form.setFieldsValue(Items[0]);
  }


  useEffect(() => {
    if (!id) {
      return;
    }

    getBoardType();
  }, [id]);

  return (
    <Modal
      width={500}
      destroyOnClose
      title="新建"
      open={modalVisible}
      onCancel={() => onCancel()}
      footer={[
        <Button key="submit" onClick={() => { form.submit(); }} type="primary">
          保存
        </Button>,
        <Button key="back" onClick={() => onCancel()}>
          取消
        </Button>,
      ]}
    >
      <Form
        name="basic"
        onFinish={saveRecord}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        style={{ maxWidth: 600 }}
        form={form}
        initialValues={{ remember: true }}
        autoComplete="off"
      >
        <Form.Item label='桌位类型' name='Name' rules={[{ required: true }]} ><Input type='string' /></Form.Item>
        <Form.Item label='最少人数' name='MinPersonCount' rules={[{ required: true }]}  ><InputNumber style={{ width: "339px" }} /></Form.Item>
        <Form.Item label='最多人数' name='MaxPersonCount' rules={[{ required: true }]}  ><InputNumber style={{ width: "339px" }} /></Form.Item>
      </Form>
    </Modal>
  );
}

export default CreateModal;
